<!--  -->
<template>
  <div class="logistics">
    <van-nav-bar
      @click-left="onClickLeft"
      title="物流跟踪"
      :left-arrow="true"
    />
    <div class="header">
      <img class="limg" :src="data.thumb" />
      <div class="main_r">
        <div class="name">
          <p>物流状态：</p>
          <p>物流公司：</p>
          <p>物流单号：</p>
          <p>物流电话：</p>
        </div>
        <div class="money">
          <p class="state">{{ data.state_name || "暂无物流状态" }}</p>
          <p>{{ data.courier_name }}</p>
          <p>{{ data.courier_id }}</p>
          <p class="company">
            <a :href="'tel:' + data.courier_tel">{{ data.courier_name }}</a>
          </p>
        </div>
      </div>
    </div>
    <div class="content" v-if="load">
      <div class="title">订单跟踪</div>
      <div class="no_wl" v-show="no_wl">暂无物流信息哦~</div>
      <div class="line"></div>
      <div
        class="main"
        v-for="(activity, index) in data.courier_info"
        :key="index"
      >
        <div class="stateicon">
          <img
            v-if="index == 0 && status ? 'success active' : 'ck'"
            src="@/assets/img/order/success.png"
          />
          <!-- <img
            v-if="index == 0 && status ? 'success active' : 'ck'"
            src="@/assets/img/order/yifahuo.png"
          />
          <img
            v-if="index == 0 && status ? 'success active' : 'ck'"
            src="@/assets/img/order/yidabao.png"
          />
          <img
            v-if="index == 0 && status ? 'success active' : 'ck'"
            src="@/assets/img/order/yizhifu.png"
          /> -->
        </div>
        <div class="speed active">{{ activity.context }}</div>
        <div class="time active">{{ activity.time }}</div>
      </div>
      <!--  <div class="main">
        <div class="stateicon">
          <img src="@/assets/img/order/yifahuo.png" />
        </div>
        <div class="speed">订单交易成功</div>
        <div class="time">2020-03-15 21:32:57</div>
      </div>
      <div class="main">
        <div class="stateicon">
          <span></span>
        </div>
        <div class="speed">订单交易成功</div>
        <div class="time">2020-03-15 21:32:57</div>
      </div>
      <div class="main">
        <div class="stateicon">
          <span></span>
        </div>
        <div class="speed">订单交易成功</div>
        <div class="time">2020-03-15 21:32:57</div>
      </div>
      <div class="main">
        <div class="stateicon">
          <img src="@/assets/img/order/yidabao.png" />
        </div>
        <div class="speed">订单交易成功</div>
        <div class="time">2020-03-15 21:32:57</div>
      </div>
      <div class="main">
        <div class="stateicon">
          <img src="@/assets/img/order/yizhifu.png" />
        </div>
        <div class="speed">订单交易成功</div>
        <div class="time">2020-03-15 21:32:57</div>
      </div> -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Fetch from "../../utils/fetch";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "logistics",
  },
  data() {
    //这里存放数据
    return {
      active: 0,
      load: false,
      data: {},
      id: 0,
      dh: "",
      no_wl: false,
      details: false,
      status: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    init() {
      Fetch("/goods/order/logisInfo", {
        id: this.id,
        courier_id: this.dh,
      }).then((res) => {
        this.data = res.data;
        if (res.data.courier_info.length == 0) {
          this.no_wl = true;
        }
        this.load = true;
        if (res.data.state_name) {
          if (res.data.state_name.indexOf("签收") != -1) {
            this.status = true;
          }
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.id = this.$route.query.id;
    this.dh = this.$route.query.dh;
    this.init();
    //this.$route.query.id
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
/* //@import url(); 引入公共css类 */
.logistics {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  .header {
    background: #ffffff;
    border-radius: 6px;
    margin: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px;
    .limg {
      width: 87px;
      height: 87px;
      margin-right: 10px;
      border: 1px solid #dfdfdf;
      border-radius: 10px;
    }
    .main_r {
      width: calc(100% - 97px);
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 6px 0 0px 0;
      .name {
        p {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #999999;
          letter-spacing: 1px;
          margin-bottom: 5px;
        }
      }
      .money {
        width: 45%;
        p {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #999999;
          letter-spacing: 1px;
          margin-bottom: 5px;
        }
        .state {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #ff4732;
          line-height: 17px;
          letter-spacing: 1px;
        }
        .company {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #0080fe;
          line-height: 17px;
          letter-spacing: 1px;
        }
      }
    }
  }
  .content {
    margin: 10px;
    background: #ffffff;
    border-radius: 6px;
    padding: 20px;
    overflow: hidden;
    position: relative;
    .line {
      width: 2px;
      border-right: 2px solid #e3e3e3;
      position: absolute;
      top: 25px;
      bottom: 62px;
    }
    .main {
      width: calc(100% - 20px);
      margin-left: 20px;
      position: relative;
      padding: 0 0 20px 0;
      .stateicon {
        position: absolute;
        background: #ffffff;
        left: -23px;
        top: 3px;
        img {
          width: 26px;
          height: 26px;
          margin-left: -7px;
        }
        span {
          display: block;
          width: 8px;
          height: 8px;
          background: #d8d8d8;
          border: 2px solid #ffffff;
          border-radius: 50%;
        }
      }
      .speed {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #999999;
        margin-left: 5px;
      }
      .time {
        margin-top: 5px;
        font-size: 11px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        margin-left: 5px;
        color: #999999;
      }
    }
  }
  .active {
    color: #20253a !important;
    font-size: 11px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #20253a;
    letter-spacing: 1px;
  }
}
</style>